<template>
  <view class="container">
    <cu-custom bgColor="bg-none" :isBack="false">
      <block slot="content">登录</block>
    </cu-custom>
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">
      <view style="padding-left: 80upx;padding-bottom: 50upx;">
        <image src="../../static/login1.png" mode="widthFix" style="width: 360upx;"></image>
      </view>
      <view>
        <view class="input-content">
          <!--          <view class="input-item">
            <text class="tit">系统名称</text>
            <view style="width: 65%;">
              <input type="text" v-model="apiWebHost" placeholder="请输入系统名称" />
            </view>
          </view> -->
          <view class="input-item">
            <text class="tit">账号</text>
            <view style="width: 65%;">
              <input type="text" v-model="username" placeholder="请输入账号" />
            </view>
          </view>
          <view class="input-item">
            <text class="tit">密码</text>
            <view class="flex align-center justify-between" style="width: 65%;">
              <input v-model="password" style="border: none;" :password="passTrue?false:true" :type="passTrue?'text':'password'" placeholder="请输入密码" />
              <u-icon name="eye-fill" @click="passTrue = true" size="20" color="#606266" v-if="!passTrue"></u-icon>
              <u-icon name="eye-off" size="20" color="#606266" @click="passTrue = false" v-else></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-top:216upx;">
        <button class="loginBtn margin-top flex justify-center align-center" style="letter-spacing: 2px;" @click="sumbitLogin">
          登 录
        </button>
      </view>
    </view>
    <view class="cu-load load-modal" v-if="logining">
      <view class="gray-text">正在登录中...</view>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        apiWebHost: 'smygc',
        logining: false,
        passTrue: false,
        token: '',
        setsm: false,
        loginType: 1,
        username: '',
        password: '',
        CustomBar: this.CustomBar
      }
    },
    computed: { ...mapState(['indexInfo', 'shareid', 'hasLogin', 'companyId']) },
    onLoad(option) {

    },
    onShow: function() {
      let token = this.$ComFunJS.getStorage('localhost')
      token.then(res => {
        if (res) {
          this.apiWebHost = res;
        }
      })
    },
    methods: {
      ...mapMutations(['login', 'changShareid', 'changeperson', 'setNewChange']),
      navTo(url) {
        uni.navigateTo({
          url
        })
      },
      sumbitLogin() {
        if (!this.apiWebHost) {
          this.$api.msg('请先输入系统地址~')
          return
        }
        if (!this.username) {
          this.$api.msg('请输入账号~')
          return
        }
        if (!this.password) {
          this.$api.msg('请输入密码~')
          return
        }
        this.$ComFunJS.adminAdress = `${this.apiWebHost}`;
        this.logining = true;
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            username: this.username,
            password: this.password,
          },
          url: "/auth/wechat/login",
          success: (res) => {
            if (res.code == 200) {
              this.logining = false;
              // res.data.localhost = this.apiWebHost;
              this.$ComFunJS.setCookie('localhost', this.apiWebHost)
              this.login(res.data)
              uni.reLaunch({
                url: '/pages/index/index'
              })
            } else {
              this.logining = false;
              this.$api.msg(res.msg)
            }
          }
        })
      }
    },
  }
</script>

<style lang='scss'>
  page {
    background: rgba(247, 250, 255, 1);
  }

  .modeImg {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
  }

  .container {
    padding-top: 120upx;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .wrapper {
    position: relative;
    z-index: 90;
    padding-bottom: 40upx;
  }

  .back-btn {
    position: absolute;
    left: 40upx;
    z-index: 9999;
    padding-top: var(--status-bar-height);
    top: 40upx;
    font-size: 40upx;
    color: #FFFFFF;
  }

  .left-top-sign {
    font-size: 120upx;
    color: $page-color-base;
    position: relative;
    left: -16upx;
  }

  .right-top-sign {
    position: absolute;
    top: 80upx;
    right: -30upx;
    z-index: 95;

    &:before,
    &:after {
      display: block;
      content: "";
      width: 400upx;
      height: 80upx;
      background: #b4f3e2;
    }

    &:before {
      transform: rotate(50deg);
      border-radius: 0 50px 0 0;
    }

    &:after {
      position: absolute;
      right: -198upx;
      top: 0;
      transform: rotate(-50deg);
      border-radius: 50px 0 0 0;
      /* background: pink; */
    }
  }

  .left-bottom-sign {
    position: absolute;
    left: -270upx;
    bottom: -320upx;
    border: 100upx solid #d0d1fd;
    border-radius: 50%;
    padding: 180upx;
  }

  .welcome {
    position: relative;
    text-align: center;
    font-size: 46upx;
    color: #555;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);

    image {
      width: 300upx;
    }
  }

  .input-content {
    width: 630upx;
    margin: 0 auto;
  }

  .input-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30upx;
    background: #fff;
    height: 90upx;
    border-radius: 4px;
    margin-bottom: 20upx;

    bor &:last-child {
      margin-bottom: 0;
    }

    .tit {
      height: 50upx;
      line-height: 56upx;
      font-size: 32rpx;
      color: $font-color-base;
    }

    input {
      height: 60upx;
      font-size: $font-base + 2upx;
      color: $font-color-dark;
    }
  }

  .yanBtn {
    font-size: 26upx;
    padding: 0 20upx;
    height: 60upx;
    line-height: 60upx;
    background: #FFFFFF;
    border: 1px solid #0163FF;
    font-size: 28upx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #0163FF;
    border-radius: 30upx;
    font-family: SourceHanSansCN;
  }

  .phoneLogin {
    text-align: center;
    font-size: 28upx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #9F9F9F;
    margin-top: 105upx;
    background: none;
    border: none;
    height: auto;

    &::after {
      display: none;
    }

  }

  .confirm-btn {
    width: 630upx;
    height: 76upx;
    line-height: 76upx;
    border-radius: 50px;
    margin-top: 70upx;
    background: $uni-color-primary;
    color: #fff;
    font-size: $font-lg;

    &:after {
      border-radius: 100px;
    }

  }

  .xyTxt {
    font-size: 24upx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #A8A8A8;
    text-align: center;
    width: 100%;
    left: 0;
  }

  .bg-green {
    background: #39b54a;
    color: #ffffff;
  }

  .forget-section {
    font-size: $font-sm+2upx;
    color: $font-color-spec;
    text-align: center;
    margin-top: 40upx;
  }

  .logoContent {
    .logoBox {
      width: 220upx;
      height: 220upx;
      background: #FFFFFF;
      box-shadow: 0px 0px 32upx 6upx rgba(1, 99, 255, 0.12);
      border-radius: 20upx;

      image {
        width: 210upx;
        height: 210upx;
      }
    }
  }

  .loginBtn {
    width: 626upx;
    height: 96upx;
    opacity: 1;
    border-radius: 122px;
    background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
    box-shadow: 0px 17upx 51upx rgba(233, 239, 245, 1);
    color: #fff;

    &.red {
      background: linear-gradient(180deg, #FF927C 0%, #FE4A4A 100%);
      box-shadow: 0px 14upx 22upx 2upx rgba(255, 156, 141, 0.42);
      border-radius: 40upx;
    }

    &.border {
      box-sizing: border-box;
      border: 2upx solid #F84A57;
      border-radius: 40upx;
      background: none;
      color: #F84A57;
      box-shadow: none
    }
  }

  .aboustext {
    font-size: 39upx;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFA;
    line-height: 39px;
    position: absolute;
    top: 20upx;
    letter-spacing: 50upx;
    opacity: 0.6;
    text-shadow: 0px 4upx 13px #DC6235;
    width: 100%;
    text-align: center;
    z-index: 9;
  }

  .register-section {
    position: absolute;
    left: 0;
    bottom: 50upx;
    width: 100%;
    font-size: $font-sm+2upx;
    color: $font-color-base;
    text-align: center;

    text {
      color: $font-color-spec;
      margin-left: 10upx;
    }
  }
</style>